import React, { useEffect, useState } from 'react';
import moment from 'moment';

export default function ClockCom() {
  //1. 声明一个状态
  let [str, setStr] = useState('');

  //3. 使用 useEffect 指定回调
  useEffect(() => {
    //启动定时器
    let timer = setInterval(() => {
      //获取当前时间的字符串
      let str = moment().format('YYYY-MM-DD HH:mm:ss');
      //更新状态
      setStr(str);
    }, 1000);

    //组件将要卸载
    return () => {
      clearInterval(timer);
    }
  }, [])

  return (
    <div style={{width: 200, padding: 20, border: 'solid 1px #abc'}}>
      {/* 2. 使用状态 */}
      {str}
    </div>
  )
}
